<template>
	<view class="center">
		<view class="fixed">
			<cu-custom bgColor="bg-shadeTop text-white"><block slot="content">我的</block></cu-custom>
		</view>
		<view class="center_top"><view class="mask"></view></view>
		<view class="center_box_bg">
			<view class="profily">
				<view class="base">
					<view
						@click="goLogin"
						:style="
							'background-image: url(' + (userInfo.avatarUrl || 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=756383114,4162691137&fm=26&gp=0.jpg') + ')'
						"
						class="profily_header"
					></view>
					<text @click="goLogin">{{ userInfo.nickName || '请先登录' }}</text>
					<!-- <u-icon class="right-top" name="email" style="color: #FF5733;"></u-icon> -->
				</view>
			</view>
			<view class="baiban"></view>
			<view class="center_menu">
				<button class="menu_item" style="height: 95rpx;font-weight: normal !important;" open-type="share">
					<image src="../../static/fumou-center-template/share.png" mode="aspectFill"></image>
					<text style="margin-left: 20rpx;">分享小程序</text>
				</button>
				<button class="menu_item" style="height: 95rpx;font-weight: normal !important;" open-type="feedback">
					<image src="../../static/fumou-center-template/9.png" mode="aspectFill"></image>
					<text style="margin-left: 20rpx;">意见反馈</text>
				</button>
				<view @click="option(item)" class="menu_item" v-for="item in menus">
					<image :src="item.icon" mode="aspectFill"></image>
					<text>{{ item.name }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			userInfo: {},
			menus: [
				{
					name: '我的订阅',
					icon: '../../static/fumou-center-template/5.png',
					requireAuth: true
				},
				{
					name: '帮助中心',
					icon: '../../static/fumou-center-template/8.png',
					requireAuth: false
				},
				{
					name: '关于我们',
					icon: '../../static/fumou-center-template/10.png',
					requireAuth: false
				}
			]
		};
	},
	onShow() {
		this.userInfo = uni.getStorageSync('userInfo');
	},
	methods: {
		goLogin() {
			uni.navigateTo({
				url: 'login'
			});
		},
		option(item) {
			/*if (item.requireAuth) {
				if (!this.isLogin()) {
					return;
				}
			}*/
			switch (item.name) {
				case '关于我们':
					uni.navigateTo({
						url: 'aboutMe'
					});
					break;
				case '我的订阅':
					uni.navigateTo({
						url: 'mySubscribe'
					});
					break;
			}
		}
	}
};
</script>

<style lang="scss">
.fixed {
	position: fixed;
	z-index: 99;
}
page {
	height: 100%;
}

.profily,
.profily_header {
	border-radius: 8px;
}

.center {
	height: 100%;

	&_top {
		height: 35%;
		background: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.huabanimg.com%2F46806e690260a26a7967be54272739809fb3cd1068a7b-mBF5KC_fw658&refer=http%3A%2F%2Fhbimg.huabanimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622966548&t=afedfa402cabb68ed41cf5a306b7a309')
			no-repeat 0% 50%;
		background-size: cover;

		// background: #E6E6E6;
		.mask {
			background: rgba(0, 0, 0, 0.4);
			height: 100%;
		}
	}

	&_box_bg {
		background: #f9f9f9;
		position: relative;

		.profily {
			position: absolute;
			width: 90%;
			// border:1px solid #F7F7F7;
			margin: 0 auto;
			top: -100upx;
			left: 5%;
			background: #fefefe;
			padding: 35upx;
			box-sizing: border-box;
			box-shadow: 0px 2px 5px #ededed;
		}
	}
}

.base {
	display: flex;
	align-items: center;
	// padding-bottom: 35upx;
	position: relative;
	.profily_header {
		height: 120upx;
		width: 120upx;
		//background-image: url('../../static/fumou-center-template/header.jpg');
		background-size: 100%;
	}

	text {
		margin-left: 20px;
		font-size: 30upx;
	}

	.right-top {
		position: absolute;
		right: 0px;
		top: 0px;
	}
}

.order_status {
	display: flex;
	justify-content: space-between;
	margin-top: 35upx;

	.status {
		width: 140upx;
		font-size: 24upx;
		text-align: center;
		letter-spacing: 0.5px;
		display: flex;
		flex-direction: column;
		.icon {
			width: 50upx;
			height: 50upx;
			margin: 0 auto;
			margin-bottom: 5px;
		}
	}
}

.baiban {
	background: #fefefe;
	height: 150upx;
}

.center_menu {
	width: 100%;
	display: inline-block;

	.menu_item {
		font-size: 28upx;
		letter-spacing: 1px;
		padding: 14px 5%;
		background: #fefefe !important;
		overflow: hidden;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		position: relative;
		border-bottom: 1px solid #efefef;

		&:hover {
			background: #f6f6f6 !important;
		}

		&::after {
			content: '';
			width: 30upx;
			height: 30upx;
			position: absolute;
			right: 5%;
			background: url('../../static/fumou-center-template/right.png') no-repeat;
			background-size: 100%;
		}

		text:nth-of-type(1) {
			margin-left: 10px;
		}

		image {
			width: 40upx;
			height: 40upx;
		}

		&:nth-of-type(4) {
			margin-top: 10px;
		}
	}
}
.center_menu .menu_item::after {
	display: none;
}
</style>
